<template>
  <!--<el-scrollbar style="height: 100%">-->
  <div id="bizVideoHouseCertCanvas" class="confirmTable" :data="data">
    <el-row class="confirmTitle">{{ option.title }}</el-row>
    <el-row class="confirmTableBody">
      <el-row v-for="(item, index) in option.column" :key="index">
        <el-row v-if="item.type == 'title'" :class="item.border">
          <el-col class="padding-style word-border-style" :span="24">{{ item.label }}</el-col>
        </el-row>
        <el-row v-else-if="item.type == 'text'" :class="item.border">
          <el-col class="padding-style" :span="10">{{ item.label }}：</el-col>
          <el-col class="padding-style txt-right" :span="14">{{ data[item.prop] }}</el-col>
        </el-row>
        <el-row v-else-if="item.type == 'image'" :class="item.border">
          <el-col class="padding-sign-style" :span="24">{{ item.label }}</el-col>
          <el-col class="padding-style txt-right peror-photo" :span="24">
            <img :src="data[item.prop]">
          </el-col>
        </el-row>
        <el-row v-else-if="item.type == 'span'" :class="item.border">
          <el-col class="padding-style text-indent" :span="24">{{ data[item.prop] }}</el-col>
        </el-row>
      </el-row>
    </el-row>
    <el-row class="confirmTableBFooter">
      <el-col :span="6" class="footer-style">客服人员编号：</el-col>
      <el-col :span="6" class="footer-style word-border-style">{{ data.managerNum }}</el-col>
      <el-col :span="6" class="footer-style">客服人员姓名：</el-col>
      <el-col :span="6" class="footer-style word-border-style">{{ data.manager }}</el-col>
    </el-row>
  </div>
  <!--</el-scrollbar>-->
</template>
<script>
export default {
  name: 'BizCertForm',
  components: {

  },
  props: ['data', 'option'],
  data() {
    return {}
  },
  created() {

  },
  mounted() {

  }
}
</script>
<style scoped>

  .word-border-style {
    font-weight: bold;
  }

  .confirmTable {
    padding: 10px 20px;
    width: 100%;
  }

  .confirmTitle {
    text-align: center;
    height: 34px;
    line-height: 34px;
    font-weight: bold;
  }

  .confirmTableBody {
    width: 100%;
    /*border: 2px solid #0c0c0c;*/
    border-left: 2px solid #0c0c0c;
    border-right: 2px solid #0c0c0c;
    border-bottom: 2px solid #0c0c0c;
  }

  .padding-style {
    padding: 10px;
  }

  .padding-sign-style {
    padding: 10px 10px 0px;
  }

  .border-bottom-style {
    border-bottom: 1px solid #909399
  }

  .border-bottom-bold-style {
    border-bottom: 2px solid #0c0c0c;
  }

  .border-top-bold-style{
    border-top: 2px solid #0c0c0c;
  }

  .confirmTableBFooter {
    padding: 5px;
  }

  .footer-style {
    padding: 4px;
  }

  .text-indent{
    text-indent: 24px;
    line-height: 25px;
  }

  .peror-photo {
    height: 200px;
    width: 300px;
    overflow: hidden;
  }

  .customerFace .peror-photo{
    height: 270px !important;
  }

  .peror-photo img {
    height: 100%;
    width: 100%;
  }
</style>
